<template>
    <div class="right-content">
      <!-- 头部查询区域 -->
        <el-form :inline="true" :model="othersData" class="demo-form-inline">
          <div style="display:inline-block">
            <el-form-item>
              <el-input v-model="empName" placeholder="输入员工姓名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="initEmps">搜索</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width:6vw" @click="showAdvanceSearchVisible = !showAdvanceSearchVisible">高级搜索</el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="getothersDataList">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addOrUpdataHandle()">新增</el-button>
            </el-form-item>
            <el-form-item>
              <el-button style="width:6vw" type="primary" @click="deleteMany()" :disabled="multipleSelection.length === 0">批量删除</el-button>
            </el-form-item>
          </div>
          <el-form-item style="right: 100px">
            <el-button type="primary">导出</el-button>
          </el-form-item>
        </el-form>
        <!-- 高级搜索区域 -->
        <div
          style="width:97%;border:1px solid #409eff;border-radius:5px;box-sizing:border-box;padding:5px;margin:10px auto"
          v-show="showAdvanceSearchVisible"
        >
          <el-row>
            <el-col :span="5">
              政治面貌:
              <el-select style="width: 60%" v-model="searchValue.politicId">
                <el-option
                v-for="item in politicsStatuss"
                :key="item.id"
                :value="item.id"
                :label="item.name">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              民族:
              <el-select placeholder="选择民族" style="width: 60%" v-model="searchValue.nationId">
                <el-option
                  v-for="item in nations"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name">
                  </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
              职位:
              <el-select style="width: 60%" v-model="searchValue.posId">
                  <el-option
                  v-for="item in positions"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name">
                  </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
              职称:
              <el-select style="width: 60%" v-model="searchValue.jobLevelId">
                  <el-option
                  v-for="item in joblevels"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name">
                  </el-option>
                </el-select>
            </el-col>
            <el-col :span="7" style="padding-top:1.5vh">
              聘用形式:
              <el-radio-group style="width: 70%" v-model="searchValue.engageForm">
                  <el-radio label="劳动合同" value="劳动合同"></el-radio>
                  <el-radio label="劳务合同" value="劳务合同"></el-radio>
                </el-radio-group>
            </el-col>
          </el-row>
          <el-row style="margin-top:5px">
            <el-col :span="5">
              所属部门:
              <el-select style="width: 60%" v-model="searchValue.departmentId">
                <el-option
                  v-for="item in departments"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name">
                  </el-option>
                </el-select>
            </el-col>
            <el-col :span="10">
              入职日期:
              <el-date-picker
                v-model="searchValue.beginDateScope"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-col>
            <el-col :span="5" :offset="4">
              <el-button @click="clearquery">取消</el-button>
              <el-button type="primary" @click="initEmps('advanced')">搜索</el-button>
            </el-col>
          </el-row>
        </div>
        <!-- 内容区域：查看他人信息的表格，实现表格分页 -->
        <div class="body-table">
            <el-table
            ref="staffManagemultipleTable"
            border
            :data="currentData"
            height="80.5%"
            :header-cell-style="{hieght: '7vh'}"
            :cell-style="cellStyle"
            @selection-change="handleSelectionChange"
          >
            <!-- 复选框 -->
            <el-table-column
              type="selection"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              type="index"
              width="80px"
              label="序号"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              prop="workId"
              label="员工工号"
              header-align="center"
              align="center">
              </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              prop="department.name"
              label="所属部门"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              prop="position.name"
              label="员工职务"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              prop="phone"
              label="联系电话"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              fixed="right"
              header-align="center"
              align="center"
              label="操作">
              <template slot-scope="scope">
                <!-- <el-link type="primary" @click="addOrUpdataHandle(scope.row)">详情</el-link>
                <el-link type="primary" @click="permissiontree(scope.row)">角色</el-link>
                <el-link type="danger" @click="deleteHandle(scope.row)">删除</el-link> -->
                <el-button type="primary" style="width:25%;height:3.5vh;padding:0px" @click="addOrUpdataHandle(scope.row)">详情</el-button>
                <el-button type="primary" style="width:25%;height:3.5vh;padding:0px" @click="permissiontree(scope.row)">角色</el-button>
                <el-button type="danger" style="width:25%;height:3.5vh;padding:0px" @click="deleteHandle(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页器 -->
        <div class="block">
          <el-pagination
            align="right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
        <!-- 弹窗，新增或修改 -->
        <others-add-or-update v-if="OthersAddOrUpdateVisible" ref="OthersAddOrUpdate" @refreshDataList="getothersDataList" :close="getothersDataList"></others-add-or-update>
        <!-- 员工角色赋值 -->
        <staff-permission-tree v-if="StaffPermissionTreeVisible" ref="StaffPermissionTree" @refreshDataList="getothersDataList" :close="getothersDataList"></staff-permission-tree>
    </div>
</template>

<script>
export default {
  name: 'StaffManage',
  data() {
    return {
      searchValue: {
        politicId: null,
        nationId: null,
        posId: null,
        jobLevelId: null,
        engageForm: '',
        departmentId: null,
        beginDateScope: null
      },
      empName: '',
      showAdvanceSearchVisible: false,
      tableData: [], // 表格中的员工数据
      currentData: [], // 当前页面的所有员工的数据
      multipleSelection: [], // 选定的多个复选框对象
      total: 0,
      value: true,
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页选定的显示条数
      othersData: { // 想要查询的员工数据
        name: '',
        region: ''
      },
      OthersAddOrUpdateVisible: false,
      StaffPermissionTreeVisible: false,
      drawer: false,
      innerDrawer: false,
      nations: [],
      positions: [],
      departments: [],
      joblevels: [],
      politicsStatuss: []
    }
  },
  components: {
    OthersAddOrUpdate: resolve => require(['../ProFile/Others-add-or-update.vue'], resolve),
    StaffPermissionTree: resolve => require(['./StaffPermissionTree.vue'], resolve)
  },
  // 生命周期
  mounted() {
    this.getothersDataList()
    this.initData()
  },
  methods: {
    // 选择每页行数
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getothersDataList()
    },
    // 选择页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.getothersDataList()
    },
    // 表格行高
    cellStyle() {
      return {
        height: '5vh',
        padding: '0'
      }
    },
    // 选择的复选框的数量
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 获取数据列表
    getothersDataList() {
      this.getRequest(`admin/emp/${this.currentPage}/${this.pageSize}`).then((resp) => {
        if (resp) {
          this.currentData = resp.list
          this.total = resp.total
          this.$forceUpdate()
          // console.log(this.currentData)
        } else {
          console.log('失败')
        }
      })
    },
    // 新增 / 修改
    addOrUpdataHandle(data) {
      this.OthersAddOrUpdateVisible = true // 显示弹出框
      this.$nextTick(() => {
        this.$refs.OthersAddOrUpdate.init(data)
      })
    },
    // 批量删除
    deleteMany() {
      this.$confirm('此操作将批量删除' + this.multipleSelection.length + '条员工的所有信息，是否继续', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = '?'
        this.multipleSelection.forEach((item) => {
          ids += 'ids=' + item.id + '&'
        })
        this.deleteRequest('/admin/emp/' + ids).then((resp) => {
          if (resp) {
            this.$message.success('删除成功')
            this.getothersDataList()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 删除
    deleteHandle(data) {
      this.$confirm('此操作将永久删除' + data.name + '员工的所有信息，是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/admin/emp/' + data.id).then((resp) => {
          if (resp) {
            this.$message.success('删除成功')
            this.getothersDataList()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 修改员工角色权限
    permissiontree(data) {
      this.StaffPermissionTreeVisible = true
      this.$nextTick(() => {
        this.$refs.StaffPermissionTree.init(data)
      })
    },
    // 获取初始化的工作数据
    initData() {
      // 民族
      if (!window.sessionStorage.getItem('nations')) {
        this.getRequest('/sys/nations').then((resp) => {
          if (resp) {
            this.nations = resp.data
            window.sessionStorage.setItem('nations', JSON.stringify(resp.data))
          }
        })
      } else {
        this.nations = JSON.parse(window.sessionStorage.getItem('nations'))
      }
      // 部门
      if (!window.sessionStorage.getItem('departments')) {
        this.getRequest('/admin/deps').then((resp) => {
          if (resp) {
            this.departments = resp.data
            window.sessionStorage.setItem('departments', JSON.stringify(resp.data))
          }
        })
      } else {
        this.departments = JSON.parse(window.sessionStorage.getItem('departments'))
      }
      // 职称
      if (!window.sessionStorage.getItem('joblevels')) {
        this.getRequest('/sys/jobLevels').then((resp) => {
          if (resp) {
            this.joblevels = resp.data
            window.sessionStorage.setItem('joblevels', JSON.stringify(resp.data))
          }
        })
      } else {
        this.joblevels = JSON.parse(window.sessionStorage.getItem('joblevels'))
      }
      // 职位
      if (!window.sessionStorage.getItem('positions')) {
        this.getRequest('/sys/allPos').then((resp) => {
          if (resp) {
            this.positions = resp.data
            window.sessionStorage.setItem('positions', JSON.stringify(resp.data))
          }
        })
      } else {
        this.positions = JSON.parse(window.sessionStorage.getItem('positions'))
      }
      // 政治面貌
      if (!window.sessionStorage.getItem('politicsStatuss')) {
        this.getRequest('/sys/politics').then((resp) => {
          if (resp) {
            this.politicsStatuss = resp.data
            window.sessionStorage.setItem('politicsStatuss', JSON.stringify(resp.data))
          }
        })
      } else {
        this.politicsStatuss = JSON.parse(window.sessionStorage.getItem('politicsStatuss'))
      }
    },
    // 高级搜索
    initEmps(type) {
      var url = '/admin/emp/?currentPage=' + this.currentPage + '&size=' + this.pageSize
      if (type && type === 'advanced') {
        if (this.searchValue.politicId) {
          url += '&politicId=' + this.searchValue.politicId
        }
        if (this.searchValue.nationId) {
          url += '&nationId=' + this.searchValue.nationId
        }
        if (this.searchValue.posId) {
          url += '&posId=' + this.searchValue.posId
        }
        if (this.searchValue.jobLevelId) {
          url += '&jobLevelId=' + this.searchValue.jobLevelId
        }
        if (this.searchValue.engageForm) {
          url += '&engageForm=' + this.searchValue.engageForm
        }
        if (this.searchValue.departmentId) {
          url += '&departmentId=' + this.searchValue.departmentId
        }
        if (this.searchValue.beginDateScope) {
          console.log(this.searchValue.beginDateScope)
          url += '&beginDateScope=' + this.searchValue.beginDateScope
        }
      } else {
        url += '&name=' + this.empName
      }
      this.getRequest(url).then(resp => {
        if (resp) {
          this.currentData = resp.data
          this.total = resp.data.length
        }
      })
    },
    // 清空高级搜索
    clearquery() {
      this.searchValue = Object.assign(this.searchValue, {
        politicId: null,
        nationId: null,
        posId: null,
        jobLevelId: null,
        engageForm: '',
        departmentId: null,
        beginDateScope: null
      })
    }
  }
}
</script>

<style scoped>
@import '../../assets/css/top-form.css';
@import '../../assets/css/table.css';
.body-table {
  width: 97%;
  height: 81%;
  margin: 0 auto;
  overflow: hidden;
  overflow-y: auto;
}
.demo-form-inline {
  height: 7vh;
}
/** 分页器 start  */
.block {
  position: absolute;
  top: 93%;
  right: 1.5%;
}
.el-pagination {
  align-items: center;
}
.el-pagination /deep/ span:not([class*=suffix]) {
  font: 1vw '宋体';
  padding-top: 0px;
}
.el-pagination /deep/ .el-pagination__total {
  padding-top: 5px !important;
}
.el-pagination /deep/ .el-input__inner {
  font: 1vw '宋体';
}
/** 分页器 end */
</style>
